<template>
    <div class="main">
        <section>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="标题" prop="name"></el-table-column>
                <el-table-column align="center" label="图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.tagImage" style="width: 100%; max-width: 100px; max-height: 100px"/>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="是否启用" width="120">
                    <template slot-scope="scope">
                        <span v-text="scope.row.tagStatus == 1 ? '是' : '否'"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="创建时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="更新时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.updatedAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="120" v-if="rightsButtons['edit']">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="dialogVisible = true">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="编辑" :visible.sync="dialogVisible">
                <el-form :model="formData" size="medium" ref="form" label-width="120px">
                    <el-form-item label="图片:" prop="tagImage">
                        <el-upload
                                class="avatar-uploader"
                                accept="image/*"
                                :action="upladUrl"
                                name="file"
                                :show-file-list="false"
                                :before-upload="beforeUpload"
                                :on-success="uploadSuccess">
                            <img v-if="formData.tagImage" :src="formData.tagImage" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="链接:" prop="url" :rules="commonRules.urlRule">
                        <el-input type="link" v-model="formData.url" placeholder="http(s)://" ></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用:" prop="tagStatus">
                        <el-switch
                                v-model="formData.tagStatus"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>
<script>
  export default {
    name: 'newUserAd',
    data(){
      return {
        list: [],
        listLoading: false,

        dialogVisible: false,
        btnDisabled: false,
        formData: {
          tagImage: '',
          url: '',
          tagStatus: 1
        }
      }
    },
    created(){
      this.fetchData();
    },
    methods: {
      fetchData(){
        this.listLoading = true;
        this.request({
          url: '/goods/activity/user/getNewList',
          method: 'post'
        }).then(({data}) => {
          this.list = [data];
          this.formData = {
            tagImage: data.tagImage,
            url: data.url,
            tagStatus: data.tagStatus
          };
          this.listLoading = false;
        }).catch(err => {
          this.list = [];
          this.formData = {
            tagImage: '',
            url: '',
            tagStatus: 0
          };
          this.listLoading = false;
        });
      },
      uploadSuccess(res) {
        this.formData.tagImage = this.replaceImgUrl(res.filePath);
      },
      save(){
        this.$refs.form.validate((validate) => {
          if(!validate){
            return;
          }
          this.btnDisabled = true;
          this.request({
            url: '/goods/activity/user/update',
            method: 'post',
            data: this.formData
          }).then(() => {
            this.$message.success('保存成功');
            this.fetchData();
            this.dialogVisible = false;
            this.btnDisabled = false;
          }).catch(err => {
            this.btnDisabled = false;
          });
        });

      }
    }
  }
</script>
